آموزش کار با ابزار کال تو اکشن (call to action) در المنتور
یکی از ابزارهای بسیار پرکاربرد و عالی که بسیار جلب توجه در سایت شما می کند ابزار کال تو اکشن (call to action) می باشد، و همین باعث آسان شدن هدایت کاربر به سمت کاری است که میخواهیم انجام دهد و صفحاتی که دوست داریم کاربران سایت از آن ها بازدید کنند.
در زیر تصویری از المان کال تو اکشن (call to action) طراحی شده که در این آموزش به نحوه طراحی و یادگیری این ابزار می پردازیم.
آموزش درج ابزار کال تو اکشن (call to action) در المنتور
برای انجام این کار کافیست، به فایل آموزشی زیر توجه کنید
همانطور که مشاهده کردید در فایل بالا، نحوه درج ابزار کال تو اکشن در میزکار المنتور بود که خیلی راحت این کار را انجام دادیم. حالا نوبت به بخش تنظیمات و گرافیکی تر کردن این ابزار می پردازیم.
تنظیمات بخش ویرایش ابزار کال تو اکشن (call to action) در المنتور
✓ تب محتوا
این بخش شامل 3 قسمت می باشد: (Image: تصویر، Content: محتوا، Ribbon: روبان)
بخش اول: Image
Skin: در بخش قسمت شما می توانید دو نوع طراحی به دلخواه خود (Classic یا Cover) را انتخاب کنید.
Position (موقعیت): در این بخش می توانید انتخاب کنید که تصویری که اپلود کردید در کدام قسمت نمایش داده شود (چپ، بالا، راست)
choose Image (انتخاب تصویر): در این کادر می توانید تصویر انتخابی خود را آپلود و انتخاب کنید.
اندازه عکس: به صورت دلخواه اندازه عکس خود را از کوچک به بزرگ به نمایش بگذارید.
بخش دوم: Content
Graphic Element (المان گرافیکی): در این بخش یک المان گرافیکی شامل (تصویر یا ایکن) در بالای عنوان اصلی می توانید بسته به سلیقه خود انتخاب کنید.
Title (عنوان): در این بخش می توانید، عنوانی را وارد کنید.
Description (توضیحات): توضیحات لازم و کوتاهی در این قسمت وارد کنید.
Title HTML Tage (تگ عنوان): عنوان ابزار از منظر اهمیت سئو می توانید به دلخواه از تگ های مختلف انتخاب کنید.
Button Text (متن دکمه): در این قسمت می توانید یک عنوان در دکمه وارد کنید.
Link (لینک): لینکی که کاربر را به قسمت مورد نظر هدایت کنید در این کادر وارد کنید.
بخش سوم: Ribbon
Title (عنوان): در این بخش می توایند عنوان دلخواه خود را وارد کنید.
✓ تب استایل
این بخش شامل 4 قسمت می باشد: (Box: جعبه ابزار، Content: محتوا، Button: دکمه، Hover Effects: جلوه های شناور)
بخش اول: Box
Height (ارتفاع): در این قسمت می توانید به صورت دستی ارتفاع جعبه ابزار کال تو اکشن را کاهش و افزایش دهید.
Alignment (ترازبندی): در این قسمت محتویات داخل ابزار در چه جهتی (چپ، راست، وسط) انتخاب نمایید.
Vertical Position (موقعیت عمودی): در این قسمت محتویات داخل ابزار به حالت عمودی (بالا، وسط، پایین) قرار می گیرد.
Image
Width (عرض): به صورت دستی می توانید عرض تصویر انتخابی را کاهش یا افزایش دهید.
Height (ارتفاع): به صورت دستی می توانید ارتفاع تصویر انتخابی را کاهش یا افزایش دهید.
بخش دوم: Content
Title
تایپوگرافی: در این قسمت می توانید به صورت سفارشی، عنوان نوشته شده را تغییر دهید (اندازه فونت، سایه متن، وزن فونت و...)
Spacing (فاصله): در این قسمت به صورت دستی اندازه فاصله عنوان با توضیحات را کاهش یا افزایش دهید.
Description
تایپوگرافی: در این قسمت می توانید به صورت سفارشی، توضیحات نوشته شده را تغییر دهید (اندازه فونت، سایه متن، وزن فونت و...)
Spacing (فاصله): در این قسمت به صورت دستی اندازه فاصله توضیحات با دکمه را کاهش یا افزایش دهید.
Colors
به دو قسمت Normal و Hover تقسم شده است.
قسمت Normal و Hover (زمانی که اشاره گر ماوس بر روی ابزار قرار گیرد)
Background Color (رنگ پس زمینه): یک رنگ بعنوان پس زمینه ابزار انتخاب کنید.
Title Color (رنگ عنوان): رنگ عنوان را به صورت دلخواه انتخاب کنید.
Description Color (رنگ توضیحات): رنگ توضیحات را می توانید به صورت دلخواه انتخاب کنید.
Button color (رنگ دکمه): می توانید رنگ دکمه را به صورت دلخواه تغییر دهید.
بخش سوم: Button
Size (سایز): می توانید سایز دکمه را به صورت سفارشی (خیلی کوچک، کوچک، متوسط، بزرگ، خیلی بزرگ) انتخاب کنید.
Typography (تایپوگرافی): در این بخش می توانید به صورت سفارشی متن دکمه (سایز، فونت، وزن فونت و...) را تغییر دهید. که به دو بخش Normal و Hover تقسم شده است.
قسمت Normal و Hover (زمانی که اشاره گر ماوس بر روی ابزار قرار گیرد)
Text Color (رنگ متن): رنگ متن دکمه را به صورت دلخواه انتخاب کنید.
Background Color (رنگ پس زمینه): یک رنگ بعنوان پس زمینه دکمه ابزار انتخاب کنید.
Border Color (رنگ حاشیه): در این قسمت رنگ حاشیه دکمه می توانید تغییر دهید.
Border Widht (عرض حاشیه): در این قسمت می توانید عرض حاشیه دکمه را به صورت دلخواه افزایش یا کاهش دهید.
Border Radius (گرد شدن حاشیه): در این قسمت می توانید حاشیه دکمه را حالت پخ یا گرد کنید.
بخش چهارم: Hover Effects
Sequenced Animation (انیمیشن متوالی): می توانید حالت انیمیشن متوالی را فعال یا غیر فعال کرد. (زمانی که اشاره گر ماس روی ابزار کال تو اکشن قرار گیرد به صورت متوالی حالت انیمیشن اجرا شود).
Hover Animation (انیمیشن شناور): زمانی که اشاره گر ماوس بر روی ابزار قرار گیرد می توانید با انتخاب دلخواه حالت های شناور مختلفی را انتخاب کنید. که به دو قسمت Normal و Hover تقسیم شده است.
قسمت Normal و Hover (زمانی که اشاره گر ماوس بر روی ابزار قرار گیرد)
Overlay Color (رنگ پوشش): زمانی که اشاره گر ماوس روی ابزار قرار گیرد با انتخاب رنگ دلخواه، پوشش ابزار تغییر می کند.
فیلترهای CSS: در این قسمت می توانید به صورت سفارشی حالت های درخشندگی، تاری، کنتراست و... را تغییر دهید.
Blend Mode (حالت ترکیبی): می توانید حالت های ترکیبی رنگی به صورت دلخواه انتخاب کنید.
✓ تب پیشرفته
در این قسمت می توانید از حالت های حاشیه های خارجی و فاصله داخلی از (چپ، راست، بالا و پایین) استفاده کنید، و از حالت های افکت (متحرک)، پس زمینه ، حاشیه کادر دور، یا css سفارشی می توانید استفاده کنید.
